<template>
	<div class="pager-container">
		<ul class="pager-content">
			<li class="page prev no-select" :class="{ 'no-hover': active === 1 }" @click="changePage(active - 1)">{{$t('message.prevPage')}}</li>
			<li v-for="(item, index) in pages" class="no-select" :class="{ item: item !== '...', 'point': item === '...', 'item-normal': active !== item && item !== '...', active : active === item }" @click="changePage(item)">{{item}}</li>
			<li class="page next no-select" :class="{ 'no-hover': active === pageNum }" @click="changePage(active + 1)">{{$t('message.nextPage')}}</li>
			<li class="total" v-if="total && pageNum">
				{{$t('message.sum2')}} {{ total }} {{$t('message.pieceRecord')}}，{{$t('message.sum2')}} {{pageNum}} {{$t('message.page')}}
			</li>
		</ul>
	</div>
</template>
<script>
  export default {
    props: {
      pageNum: {
        type: [Number, String],
        default: 1
      },
      activeIndex: {
        type: [Number, String],
        default: 1
      },
      total: {
        type: [Number, String]
      }
    },
    data () {
      return {
        active: parseInt(this.activeIndex)
      }
    },
    computed: {
      pages () {
        if (this.pageNum < 6) {
          let pages = []
          for (let i = 1; i <= this.pageNum; i++) {
            pages.push(i)
          }
          return pages
        } else {
          if (this.active < 4) {
            let pages = [1, 2, 3, '...', this.pageNum]
            return pages
          } else if (this.active >= (this.pageNum - 2)) {
            let pages = [1, '...', this.pageNum - 2, this.pageNum - 1, this.pageNum]
            return pages
          } else {
            let pages = [1, '...', this.active - 1, this.active, this.active + 1, '...', this.pageNum]
            return pages
          }
        }
      }
    },
    watch: {
      activeIndex (val) {
        this.active = parseInt(val)
      }
    },
    methods: {
      changePage (val) {
        if (val === 0 || val === this.pageNum + 1 || val === '...' || val === this.active) {
          return
        } else {
          this.active = val
          this.$emit('change-page', val)
        }
      }
    }
  }
</script>
<style scoped>
  .pager-container {
  	position: relative;
  	overflow: hidden;
  }
  
  .pager-content {
  	float: left;
  	position: relative;
  	left: 50%;
  }
  
  .pager-content li {
  	float: left;
  	position: relative;
  	right: 50%;
  	margin-right: 16px;
  }
  
  .pager-content li:last-child {
  	margin-right: 0;
  }
  
  .page {
  	height: 30px;
  	line-height: 30px;
  	cursor: pointer;
  }
  
  .page:hover {
  	cursor: pointer;
  	text-decoration: underline;
  }
  
  .no-hover {
  	cursor: default;
  	color: #a5a5a5;
  }
  
  .no-hover:hover {
  	cursor: default;
  	text-decoration: none;
  }
  
  .no-select {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
  }
  
  .item {
  	width: 30px;
  	height: 30px;
  	line-height: 28px;
  	box-sizing: border-box;
  	border-radius: 2px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
  }
  .item-normal {
  	border: 1px solid #e6e6e6;
  	color: #a5a5a5;
  }
  .item-normal:hover {
  	border: 1px solid #ff600a;
  }
  .pager-container .active {
    background: #ff600a !important;
    color: #fff;
    border: 1px solid #ff600a;
  }
  .point {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    margin-left: 16px;
    letter-spacing: 3px;
    color: #a5a5a5;
  }
  .total {
  	height: 30px;
  	line-height: 30px;
  	color: #666;
  }
</style>